
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>办事大厅</title>
    <link rel="stylesheet" href="<c:url value="/resource/wechat/css/frozen2.css"></c:url>">
    <link rel="stylesheet" href="<c:url value="/resource/wechat/css/main2.css"></c:url>">
    <script type="text/javascript" src="<c:url value="/resource/wx/indexjs/jquery-1.11.1.min.js"></c:url>"></script>
    <script src="<c:url value='/resource/wechat/js/FormValid.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wechat/js/main.js'/>"></script>
    <style>
        #more_div{width: 95%;float: left;margin-top: 5px; font-size: 0.9em;align-content: center;color: #6b6e75; display: none;}
        .ui-avatar{background: #fff;-webkit-border-radius:0px}
        .ui-avatar img{width: 100%;}
        .lysc_pup{width: 92%; left: 4%;padding-top: 2px;}
        .lysc_pup_text{text-align: left;color: #000;}
        .lysc_pup_text .lf{line-height: 30px; float: left;}
        .lysc_pup_text .rt{line-height: 30px;}
        .lysc_pup_text p{width: 100%;line-height: 20px;float: left;text-align: left;font-size: 12px; color: #f00;}
        .onload p {
            font-size: 16px;
        }

        .success_p1 {
            text-align: center;
            color: #fff;
            background: rgba(32, 30, 30, 0.81);
            line-height: 50px;
            position: fixed; /**定位采用此种方式**/
            left: 50%; /**左边50%**/
            top: 50%; /**顶部50%**/
            margin-top: -100px; /**上移-50%**/
            margin-left: -100px; /**左移-50%**/
            width: 50%;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>

<body class="bg_bg" ontouchstart>
<section class="ui-container">
    <div class="inpt_row14">
        <div class="inpt_row14_mian">
            <div class="row14_rt">
                <a href="javaScript:search();">搜索</a>
            </div>
            <div class="row14_lf" id="row14_lf" >
                <div class="select1" id="shiju_sxzx" onclick="show()">
                    <div class="select1_main">警种选择</div>

                </div>
                <div class="inpt1">
                    <input type="text" id="keywords" placeholder="请输入事项名称"/>
                </div>
            </div>
        </div>
        <ul class="xl_ul" id="ul_select_sxzx">
            <div class="sxzx_fl" >警种</div>
            <div>
                <%--<li value="" >全部</li>--%>
                <c:forEach var="jz" items="${jz}">
                    <li value="${jz.id}" >${jz.value} </li>
                </c:forEach>
            </div>
            <div class="sxzx_fl">分类</div>
            <div class="ui-form" style="width: 100%;float: left;background: #f8f8f8;">
                <form action="#">
                    <div class="ui-form-item ui-border-b">
                        <label style="width: 0px;"></label>
                        <label class="ui-radio" id="ui-radio" for="radio" style="width: 100%; float: left;margin: 8px 0 0 -6px;">
                            <div style="width: 33%;float: left;">
                                <input type="radio" name="case_type" value="" checked="checked">全部
                            </div>
                            <div style="width: 33%;float: left;">
                                <input type="radio" name="case_type" value="P" >个人业务
                            </div>
                            <div style="width:33%;float: left;">
                                <input type="radio" name="case_type"  value="B" style="margin-left: 10%;">企业业务
                            </div>
                        </label>
                    </div>
                </form>
            </div>
        </ul>
    </div>

    <div style="clear: both;"></div>
    <ul class="ui-list ui-list-pure ui-list-link ui-border-b" style="border-top: 1px solid #f0f0f0;" id="mater">

    </ul>
    <div id="more_div"  align="center" onclick="more()">
        <span >加载更多....</span>
    </div>
    <div id="nomore_div"  align="center" >
    </div>
</section>
<form action="<c:url value='/api/case/caselist'/>" method="post" id ="search_form">
    <input type="hidden" name="jz" id="jz" value=""/>
    <input type="hidden" name="pageNum" value="${pageNum}"/>
    <%--<input type="hidden" name="userGuid" value="${query.userGuid}"/>--%>
    <input type="hidden" name="keywords" value=""/>
    <input type="hidden" name="caseType" value=""/>
</form>
<script src="<c:url value='/resource/js/jquery-2.0.min.js'/>"></script>
<script src="<c:url value='/resource/wechat/js/zepto.min.js'/>"></script>
<script src="<c:url value='/resource/js/jquery.form.min.js'/>"></script>
<script type="text/javascript" src="https://gaapi.jl.gov.cn/logservice/resource/js/os.analystic-1.4.min.js"></script>
</body>
</html>

<script>

    $(function(){
        $("input[name='jz']").val("");

        search();
    })


    $("input[name='case_type']").click(function(){
        $("input[name='caseType']").val(this.value);
    });
    function search(){
        $("input[name='pageNum']").val(1);
        $("#ul_select_sxzx").hide();
        $("input[name='keywords']").val($("#keywords").val());
        $("#mater").html("");
        $("#search_form").ajaxSubmit({
            success:function(resp){
                var html="";
                if(resp.succ&&resp.data!=null){
                    $.each(resp.data.list,function(i,c){
                        html+=" <li class=\"ui-border-t\" onclick=\" detail('"+ c.guid+"')\"'><h4>"+ c.matName+"</h4></li>";
                    });
                    $("#mater").html(html);
                }
                if(resp.data.totalPage >1){
                    $("#more_div").html("<span >加载更多....</span>");
                    $("#more_div").css("display","block");
                    $("#nomore_div").css("display","none");
                }else{
                    $("#more_div").css("display","none")
                    $("#nomore_div").css("display","block");
                    $("#nomore_div").html("<span >无更多数据</span>");
                }
            }
        });
    }

    function more(){
        $("#more_div").html("<span >正在加载....</span>");
        var num=parseInt($("input[name='pageNum']").val())+1;
        $("input[name='pageNum']").val(num);
        $("#search_form").ajaxSubmit({
            success:function(resp){
                var html="";
                if(resp.succ&&resp.data!=null){
                    $.each(resp.data.list,function(i,c){
                        html+=" <li class=\"ui-border-t\" onclick=\" detail('"+ c.guid+"')\"'><h4>"+ c.matName+"</h4></li>";
                    });
                    $("#mater").append(html);
                }
                if(resp.data.totalPage > num){
                    $("#more_div").html("<span >加载更多....</span>");
                    $("#more_div").css("display","block");
                    $("#nomore_div").css("display","none");
                }else{
                    $("#more_div").css("display","none")
                    $("#nomore_div").css("display","block");
                    $("#nomore_div").html("<span >无更多数据</span>");
                }
            }
        });
    }

    function detail(caseNo){
        $("#ul_select_sxzx").hide();
        window.location.href="<c:url value='/api/case/detail?caseNo="+caseNo+"'/>";
    }

    function show(){
        $("#ul_select_sxzx div").show();
        $("#ul_select_sxzx").fadeToggle("slow");
    }
    $("#ul_select_sxzx div li").click(function(){
       var v= $(this).attr("value");
        var html=$(this).html();
        $("input[name='jz']").val(v);
        $(".select1_main").html(html);
        $(this).parent().fadeToggle("slow");
//        search();
    });
    $(".sxzx_fl").click(function(){
        $(this).next().fadeToggle("slow");
    });
</script>